<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /**
         * 把平铺的数组结构转成树形结构
         */
        // [
        //   { 'id': '29', 'pid': '',     'name': '总裁办' },
        //   { 'id': '2c', 'pid': '',     'name': '财务部' },
        //   { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
        //   { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
        //   { 'id': 'd2', 'pid': '',     'name': '技术部'},
        //   { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'}
        // ]

     const aaa =  [
          { 'id': '29', 'pid': '',     'name': '总裁办' },
          { 'id': '2c', 'pid': '',     'name': '财务部' },
          { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
          { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
          { 'id': 'd2', 'pid': '',     'name': '技术部'},
          { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'},
          { 'id': '2g', 'pid': 'd2', 'name': 'Python研发部'},
        ]

    // 函数的作用： 封装代码，提高代码的复用性
    /* 
      需求；把平铺的数组结构转成树形结构,
      步骤：
      1. 遍历数组中的对象，给每一个对象添加children树形，值默认是 空数组
      1.1 判断item对象中是否有children属性，如果没有，就添加一个
      2. 为了方便找数据，创建映射对象,取出item的id作为健，值存的就是对象item本身
      3 将平铺的数据转树形的结构
      3.1根据pid找父级---mapObj中找父级

    */
    function tranDataToTree(arr){
        const  newObj = {}  
        const  newArr =[]
        arr.forEach(item => {
          // 判断元素是否 有children
          if(!item.children){   //判断item对象中是否有children属性，如果没有，就添加一个
            //没有 children 就加上一个 children =[]
           item.children  = [] //遍历数组中的对象，给每一个对象添加children树形，值默认是 空数组
          }
          // 为了方便找数据，创建映射对象,取出item的id作为健，值存的就是对象item本身
          newObj[item.id] = item  //添加了下标  下标的值是每一个
          // console.log( 'newObj', newObj)
        })
        // console.log(newObj) 
        arr.forEach(item =>{
        // 根据pid找父级---mapObj中找父级
        // value 返回的结果 undefind  ,就说明此时的item是一级的数据
        // value 返回的结果 对象（item的父级） 此时就说明item二级的数据
          const value = newObj[item.pid]
          if(value){
            // 此时就说明item二级的数据,需要添加到父级的children属性中
            value.children.push(item) //二级数据
            console.log(value)
          }else{
            //value 返回的结果 undefind  ,就说明此时的item是一级的数据,就直接将一级的数据添加到新数组中
            newArr.push(item) //一级数据
          }
        })
        // console.log('newArr',newArr)
        return  newArr
    }

    const result =   tranDataToTree(aaa)
    console.log('result',result);
    






    // 把平铺的数组结构转成树形结构
/* export function transDataToTreeData(arr) {
  // 需求；把平铺的数组结构转成树形结构
  // 步骤：
  // 1. 遍历数组中的对象，给每一个对象添加children树形，值默认是空数组

  const mapObj = {}
  arr.forEach(item => {
    // 1.1 判断item对象中是否有children属性，如果没有，就添加一个
    if (!item.children) {
      item.children = []
    }
    // 2. 为了方便找数据，创建映射对象,取出item的id作为健，值存的就是对象item本身
    mapObj[item.id] = item
  })
  // console.log(arr)
  // console.log('mapObj', mapObj)
  // 3 将平铺的数据转树形的结构
  const new_arr = [] // 存放属性结构的数据

  arr.forEach(item => {
    // 根据pid找父级---mapObj中找父级
    const parent = mapObj[item.pid]
    //   parent 返回的结果 undefind  ,就说明此时的item是一级的数据
    //   parent 返回的结果 对象（item的父级） 此时就说明item二级的数据
    if (parent) {
      //  此时就说明item二级的数据,需要添加到父级的children属性中
      parent.children.push(item)
    } else {
      // parent 返回的结果 undefind  ,就说明此时的item是一级的数据,就直接将一级的数据添加到新数组中
      new_arr.push(item)
    }
  })

  // console.log('new_arr',new_arr);
  return new_arr
} */

    
        

      


    </script>
</head>
<body>
    
</body>
</html>